<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>数字华容道</title>
    <link rel="stylesheet" href="../css/index.css" />
  </head>
  <body>
    <div class="box">
      <!-- 游戏标题 -->
      <h1>数字华容道</h1>
      <hr />
      <div class="gameContainer">
        <!-- 游戏相关提示信息 -->
        <div class="left">
          <div class="fun" style="height: 100%; display: flex; flex-direction: column; justify-content: space-between">
            <div>
              <strong>游戏规则：</strong>
              <p>1. 移动方块依次出现1、2、3、4、5、6、7、8、……、(行数×列数－1)，就可通关！</p>
              <p>2. 不能对角线移动，不能跳格子移动。</p>
              <p>3. 只能相邻上下或左右。</p>
            </div>
            <hr />
            <div><strong>移动步数：</strong> <span id="num">0</span></div>

            <hr />
            <div class="gameFunc" style="display: flex; align-items: center">
              <span style="flex: 1">
                <strong>游戏功能：</strong>
              </span>
              <button id="three">3×3</button>
              <button id="four">4×4</button>
              <button id="five">5×5</button>
              <button id="reset">重开</button>
            </div>
            <hr />
            <div>
              <label for="customInput"><strong>指定序列：</strong></label>
              <div style="display: flex; justify-content: space-between; align-items: center">
                <input id="customInput" type="text" placeholder="指定数列,例如:1,2,3,4,6,7,8……,(行数×列数－1)" />
                <button id="confirm">确定</button>
              </div>
            </div>
          </div>
        </div>
        <!-- 游戏区域 -->
        <div class="center">
          <table border="1">
            <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
              <td>5</td>
            </tr>
            <tr>
              <td>6</td>
              <td>7</td>
              <td>8</td>
              <td>9</td>
              <td>10</td>
            </tr>
            <tr>
              <td>11</td>
              <td>12</td>
              <td>13</td>
              <td>14</td>
              <td>15</td>
            </tr>
            <tr>
              <td>16</td>
              <td>17</td>
              <td>18</td>
              <td>19</td>
              <td>20</td>
            </tr>
            <tr>
              <td>21</td>
              <td>22</td>
              <td>23</td>
              <td>24</td>
              <td class="current"></td>
            </tr>
          </table>
        </div>
        <div class="right">
          <!-- 玩家自定义游戏 -->
          <div class="fun">
            <div><strong>游戏提示：</strong><span id="error"></span></div>
            <div id="desc" style="color: red; visibility: hidden">逆序数为“奇数”，此局无解，请点击“重开”游戏。</div>
            <div>
              <p>
                <strong>逆序数:</strong>
                是指，在一个数列中，任取两个数字，如果前面的数字大于后面的数字，则这两个数字形成一个逆序。在数字华容道中，忽略空位，将盘面上的数字从上到下、从左到右排列成一个序列，然后计算这个序列的逆序数总和。如果逆序数的总和是偶数，那么这个布局是有解的；如果是奇数，则这个布局是无解的。
              </p>
              <p><strong>例如：</strong>如果一个布局的数字序列（空格忽略不计）是12345678，那么其逆序数为0（因为它已经是顺序排列），这是一个有解的布局。如果布局是12345687，其逆序数为1（因为只有数字8和7是逆序的），所以这个布局是无解的。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 模态框：蒙版和弹出窗口 -->
    <div id="myModal" class="modal">
      <div class="modal-content">
        <span id="close">&times;</span>
        <p>Some text in the Modal..</p>
      </div>
    </div>
    <script src="../js/index.js"></script>
  </body>
</html>
